<style lang="less">
@import "../../styles/common.less";
@import "./realtime.less";
</style>
<style scoped>
.access-current-user-con p b {
  color: #444;
}
.access-current-user-con p {
  line-height: 2.2;
  padding: 0;
}
</style>


<template>
    <div class="access">
        <Row>
            <Col span="18">
                <Card style="min-height: calc(100vh - 124px)">
                    <p slot="title">
                        <Icon type="location"></Icon>
                        设备定位
                    </p>
                    <indoorMap ref="indoorMap"></indoorMap>
                </Card>
            </Col>
            <Col span="6" class="padding-left-10">
                <Card style="min-height: calc(100vh - 124px)">
                    <p slot="title">
                        <Icon type="ios-medical"></Icon>
                        当前设备
                    </p>
                    <div>
                        <Input v-model="value" placeholder="设备ID" style="margin-bottom: 20px; width: calc(100% - 72px);  vertical-align: top"></Input>
                        <Button type="primary" style="width: 60px; margin-left: 8px; vertical-align: top" @click="search">定位</Button>
                    </div>
                    <div class="access-current-user-con">
                        <img src="../../images/device.jpg" alt="">
                        <div style="margin-top: 16px">
                            <p class="text-align-left">设备ID: <b><a>{{ ID }}</a></b></p>
                            <p class="text-align-left">设备名称: <b>{{ name }}</b></p>
                            <p class="text-align-left">设备状态: <Tag color="green">使用中</Tag></p>
                            <p class="text-align-left">所属科室: <b>{{ dept }}</b></p>
                            <p class="text-align-left">价值: <b>￥{{ value }}</b></p>
                            <p class="text-align-left">平均单日运转: <b>{{ avgRunTime }}小时</b></p>
                            <p class="text-align-left">最后启动: <b>{{ lastRun }}</b></p>
                            <p class="text-align-left">电压: <b>219.41 V</b></p>
                            <p class="text-align-left">电流: <b>118.31 mA</b></p>
                            <p class="text-align-left">电功率: <b>32.54 W</b></p>
                            <p class="text-align-left">使用情况: 1.84 / 4h
                                <div style="width: 90%; marign-left: 5%">
                                    <Progress :percent="45" status="active" hide-info></Progress>
                                </div>
                            </p>
                        </div>
                    </div>
                </Card>
            </Col>
        </Row>
    </div>
</template>

<script>
import Cookies from "js-cookie";
require("../../assets/Indoor.css");
import Indoor from "../../assets/Indoor.js";
import indoorMap from "../my-components/indoorMap.vue";
window.NGR = Indoor;

export default {
  name: "access_index",
  components: {
    indoorMap
  },
  data() {
    return {
      ID: "D3247812",
      name: "核磁共振仪",
      dept: "测试科室",
      value: "1300000",
      status: "inUse",
      avgRunTime: "3.7",
      lastRun: "2018-02-12 13:38:49"
    };
  },
  computed: {
    avatorPath() {
      return localStorage.avatorImgPath;
    }
  },
  mounted() {
    
  },
  methods: {
    search() {
      this.$refs.indoorMap.changeShowCategory("none");
      this.$refs.indoorMap.loadLocationMarker(
        432712.1121421734, 108823.41772460938,
        "deviceLocation",
        [50, 50]
      );
    }
  }
};
</script>

